<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="80%"
    top="2vh"
  >
    <div class="wp-panel">
      <div class="wp-panel__form">
        <el-form :model="productEntryInfo" label-width="120px"  ref="productEntryForm" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="入库类型" prop="stockType">
                <el-select
                  class="wp-form-280"
                  v-model="productEntryInfo.stockType"
                  placeholder="入库类型"
                >
                  <el-option label="初始化入库" value="0"></el-option>
                  <el-option label="采购入库" value="1"></el-option>
                  <el-option label="销售退货入库" value="2"></el-option>
                  <el-option label="其他入库" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入库单号" prop="stockNo">
                <el-input
                  class="wp-form-280"
                  v-model="productEntryInfo.stockNo"
                  placeholder="入库单号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="入库仓库" prop="warehouseName">
                <el-input
                  class="wp-form-280"
                  v-model="productEntryInfo.warehouseName"
                  placeholder="+添加"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="入库时间" prop="entryDate">
                <el-date-picker
                  class="wp-form-280__picker"
                  v-model="productEntryInfo.entryDate"
                  placeholder="入库时间"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input
                  class="wp-form-280"
                  type="textarea"
                  v-model="productEntryInfo.remark"
                  placeholder="备注"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="wp-panel__talbe">
        <div class="header">
          <el-button type="warning" @click="onOpenPanel">添加产品</el-button>
        </div>
        <el-table
          border
          stripe
          :data="productEntryInfo.productList"
          :key="talbekey"
          :row-class-name="tableRowClassName"
          @cell-click="cellclick"
        >
          <el-table-column
            label="产品名称"
            prop="productName"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="产品标签" prop="tagText"></el-table-column>
          <el-table-column
            label="产品型号"
            prop="model"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="入库数量" prop="productNum">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                :min="1"
                v-model="scope.row.productNum"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="备注" show-overflow-tooltip prop="remark">
            <template slot-scope="scope">
              <el-input
                v-if="remarkIsActive(scope.row)"
                maxlength="100"
                size="mini"
                :ref="scope.row.productCode + scope.$index"
                @blur="remarkBlur(scope.row)"
                v-model="scope.row.remark"
              ></el-input>
              <el-tooltip v-else :content="scope.row.remark" placement="top">
                <span>{{ scope.row.remark }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wp-panel-btn">
      <el-button @click.native="close">取 消</el-button>
      <el-button type="success">确 定</el-button>
    </div>
    <Drawer ref="entryProductDrawer" width="60%">
      <product-search
       :plist="productEntryInfo.productList"
        productCardType="stock"
        componentName="StockProductCard"
        @save="handleSave"
      ></product-search>
    </Drawer>
  </el-dialog>
</template>
<script>
import Drawer from '@/components/Drawer'
import ProductSearch from '../ProductSearch'
export default {
  name: 'ProductEntryPanel',
  components: { Drawer, ProductSearch },
  data () {
    return {
      visible: false,
      title: '',
      talbekey: '',
      activeRemarks: [],
      productEntryInfo: {},
      rules: {
        stockType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        stockNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        warehouseName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        entryDate: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    reloadList () {
      this.talbekey = Math.random()
    },
    show (title, data) {
      this.visible = true
      if (data) {
        this.productEntryInfo = { ...data }
        this.title = title || '编辑'
      } else {
        this.title = title || '新建'
      }
    },
    handleSave (data) {
      let productList = this.productEntryInfo.productList || []
      let isSave = true
      for (let i = 0; i < productList.length; i++) {
        if (data.productCode === productList[i].productCode) {
          productList[i] = { ...data }
          isSave = false
          break
        }
      }
      if (isSave) {
        productList.unshift(data)
      }
      this.productEntryInfo.productList = productList
      this.reloadList()
    },
    close () {
      this.visible = false
    },
    tooltipRemark (index) {
      return this.activeRemark === index
    },
    dbRemark (index) {
      this.activeRemark = index
    },
    tableRowClassName ({ row, rowIndex }) {
      row.index = rowIndex
      return ''
    },
    remarkIsActive (row) {
      return this.activeRemarks.includes(row.productCode)
    },
    remarkBlur (row) {
      this.activeRemarks = this.activeRemarks.filter((item) => {
        return item !== row.productCode
      })
    },
    cellclick (row, column, cell, event) {
      if (column.property === 'remark') {
        if (!this.activeRemarks.includes(row.productCode)) {
          this.activeRemarks.push(row.productCode)
        }
        this.$nextTick(() => {
          this.$refs[`${row.productCode + row.index}`].focus()
        })
      }
    },
    onOpenPanel () {
      this.$refs.entryProductDrawer.show()
    },
    handleDelete (index, row) {
      this.$msgBox.confirm(
        '确认删除产品' + (row.productName || '') + '?',
        () => {
          this.productEntryInfo.productList.splice(index, 1)
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-panel {
  height: 450px;
  overflow: auto;
  padding: 10px;
}
.wp-panel__talbe {
  text-align: right;
  .header {
    margin-bottom: 5px;
  }
}
.wp-form-280 {
  width: 280px;
}
.wp-panel-btn {
  text-align: center;
}
</style>
